<script setup  lang="ts">
interface PropsType {
  todo_count:number,
  type:string,
  handleClear:()=>void
}

const Props = defineProps<PropsType>()
const emit = defineEmits(['changeType'])
/** 类型点击更改事件 */
const handlechangetype =(type:string) => {
  emit('changeType',type)
}
</script>

<template>
  <footer class="footer">
    <span class="todo-count"><strong>{{todo_count}}</strong> item left</span>
    <ul class="filters">
      <li>
        <a :class="type === 'All' ? 'selected' : ''" href="#/" @click="handlechangetype('All')">All</a>
      </li>
      <li>
        <a href="#/active" :class="type === 'Active' ? 'selected' : ''" @click="handlechangetype('Active')">Active</a>
      </li>
      <li>
        <a href="#/completed" @click="handlechangetype('Completed')"  :class="type === 'Completed' ? 'selected' : ''">Completed</a>
      </li>
    </ul>
    <button class="clear-completed" @click="handleClear">Clear completed</button>
  </footer>
</template>

<style lang="less" scoped></style>
